<template>
	<div class="base-info-content"> 
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" :size="formSize" status-icon>
			<el-form-item label="商品发布：" >
				<el-radio-group v-model="ruleForm.publish" >
					<el-radio-button :label="1">
						<div class="width70">快速发布</div>
					</el-radio-button>
					<el-radio-button :label="2">
						<div class="width70">标准发布</div>
					</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="商品来源：" >
				<el-radio-group v-model="ruleForm.source" >
					<el-radio-button :label="1">
						<div class="width70">供应链</div>
					</el-radio-button>
					<el-radio-button :label="2">
						<div class="width70">自主发布</div>
					</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<h3 class="line-title">商品类型</h3>
			<el-form-item label="商品类型：" prop="type">
				<section style="display: flex; flex-direction: column;">
					<section>
						<el-radio-group v-model="ruleForm.type" >
							<el-radio-button :label="1">
								<div class="width70">商品</div>
							</el-radio-button>
							<el-radio-button :label="2">
								<div class="width70">卡项</div>
							</el-radio-button>
						</el-radio-group>
					</section>
					<section>
						商品类型在商品保存后<span style="color: #f55555;">无法修改，请谨慎选择!</span>
					</section>
				</section>
			</el-form-item>
			<el-form-item label="商品属性：" prop="property">
				<el-select v-model="ruleForm.property" placeholder="请选择商品属性" class="form-ele-size">
					<el-option :label="p.label" :value="p.value" v-for="p of state.goodsProperty" :key="p.value" /> 
				</el-select>
			</el-form-item>
			<h3 class="line-title">销售渠道</h3>
			<el-form-item label="销售渠道：" prop="cellPath">
				<el-checkbox-group v-model="ruleForm.cellPath">
					<el-checkbox label="门店销售" name="store" />
					<el-checkbox label="线上销售" name="line" /> 
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="销售状态：" prop="status">
				<el-checkbox-group v-model="ruleForm.status">
					<el-checkbox label="销售" name="1" />
					<el-checkbox label="内采" name="2" /> 
				</el-checkbox-group>
			</el-form-item>
			<h3 class="line-title">基础信息</h3>
			<el-form-item label="系统分类：" prop="system">
				<el-select v-model="ruleForm.system" placeholder="请选择系统分类" class="form-ele-size">
					<el-option :label="p.label" :value="p.value" v-for="p of state.goodsProperty" :key="p.value" /> 
				</el-select>
			</el-form-item>
			<el-form-item label="商品品牌：" prop="brand">
				<el-select v-model="ruleForm.brand" placeholder="请选择商品品牌" class="form-ele-size">
					<el-option :label="p.label" :value="p.value" v-for="p of state.goodsProperty" :key="p.value" /> 
				</el-select>&emsp;
				<el-button  @click="addBrand"><el-icon><Plus /></el-icon>新增品牌</el-button>
			</el-form-item>
			<el-form-item label="商品名称：" prop="name">
				<el-input v-model="ruleForm.name" class="form-ele-size" placeholder="请输入商品名称" />
			</el-form-item>
			<el-form-item label="商品主图：" >
				<section>
					<section class="selector-img" @click="selectImg">
						<el-icon size="30" color="#999"><Plus /></el-icon>
					</section>
					<p style="color: #ccc;">支持jpg、gif、png格式上传或从图片空间中选择，建议使用尺寸800px *800px 以上、大小不超过1M的正方形图片；</p>
					<section class="selector-img" @click="selectImg" style="width: 160px;">
						<el-icon size="30" color="#999"><Plus /></el-icon>
					</section>
					<p style="color: #ccc;">支持jpg、gif、png格式上传或从图片空间中选择，建议使用尺寸260px * 108px以上、大小不超过1M的长方形图片；</p>
				</section>
			</el-form-item>
			<el-form-item label="图片视频比例：" >
				<el-radio-group>
					<el-radio label="1">1:1</el-radio>
					<el-radio label="1">3:4</el-radio>
					<el-radio label="1">4:3</el-radio>
					<el-radio label="1">16:9</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="商品轮播图：" >
				<section>
					<section class="selector-img" @click="selectImg">
						<el-icon size="30" color="#999"><Plus /></el-icon>
					</section>
					<p style="color: #ccc;">支持jpg、gif、png格式上传或从图片空间中选择，建议使用尺寸260px * 108px以上、大小不超过1M的长方形图片；</p>
				</section>
			</el-form-item>
			<el-form-item label="添加视频：" >
				<section>
					<el-switch />
				</section>
			</el-form-item>
			<el-form-item label="视频类型：" >
				<section>
					<el-radio-group>
						<el-radio label="1">本地视频</el-radio>
						<el-radio label="2">视频链接</el-radio>
					</el-radio-group>
					<section class="selector-img" @click="selectImg">
						<el-icon size="30" color="#999"><Plus /></el-icon>
					</section>
					<section>
						<el-input v-model="ruleForm.name" class="form-ele-size" placeholder="请输入视频链接" />
					</section>
				</section>
			</el-form-item>
			<el-form-item label="视频自动播放：" >
				<el-radio-group>
					<el-radio label="1">是</el-radio>
					<el-radio label="2">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="静音播放：" >
				<el-radio-group v-model="radio1">
					<el-radio label="1">是</el-radio>
					<el-radio label="2">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="门店商品分类：" prop="category">
				<el-select v-model="ruleForm.category" placeholder="请选择商品品牌" class="form-ele-size">
					<el-option :label="p.label" :value="p.value" v-for="p of state.goodsProperty" :key="p.value" /> 
				</el-select>&emsp;
				<el-button  @click="addCategores"><el-icon><Plus /></el-icon>新增分类</el-button>
			</el-form-item>
			<section style="text-align: center; margin: 50px 0;">
				<el-button type="primary" size="large" @click="submitForm(ruleFormRef)">提交</el-button>
				<el-button type="primary" size="large" @click="nextStep">下一步</el-button>
			</section>
		</el-form>
		<SelectGoodsImg v-model="selectVisibel" /> 
		<SelectCellStore v-model="storeVisibel" />
		<AddBrand v-model="brandVisibel" />
		<AddCateGory v-model="categoryVisibel"  />
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { reactive, ref, defineAsyncComponent } from 'vue';
import { Plus } from '@element-plus/icons-vue'

import type { FormInstance, FormRules } from 'element-plus'
import type { TStep } from '../add.vue'
import AddCategory from '/@/views/commodity/goodList/components/AddCategory.vue';



const SelectGoodsImg = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/SelectGoodsImg.vue' ))
const SelectCellStore = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/SelectCellStore.vue'  ))
const AddBrand = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/AddBrand.vue'  ))
const AddCateGory = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/AddCategory.vue'  ))
// import SelectGoodsImg from '/@/views/commodity/goodList/components/SelectGoodsImg.vue' 
// import SelectCellStore from '/@/views/commodity/goodList/components/SelectCellStore.vue' 
// import AddBrand from '/@/views/commodity/goodList/components/AddBrand.vue' 
const skuSpecs = defineAsyncComponent(() => import('/@/components/commodity/goodSpecs.vue'))

const emit = defineEmits<{
	stepChange: [step: TStep] 
}>()

const selectVisibel = ref(false)
const storeVisibel = ref(false)
const brandVisibel = ref(false)
const categoryVisibel = ref(false)

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const state = reactive({
	goodsProperty: [
		{ label: '商品', value: 1},
		{ label: '家具', value: 2},
		{ label: '套盒', value: 3},
	],
	specsList:[
		{
			value: '衣服',
			id: 229,
			list: [
				{
					itemName: '颜色',
					itemId: 1,
					itemList: [
						{ value: '黑色', id: 1 },
						{ value: '白色', id: 2 },
						{ value: '红色', id: 3 }
					]
				},{
					itemName: '尺寸',
					itemId: 3,
					itemList: [
						{ value: '大号', id: 1 },
						{ value: '中号', id: 2 },
						{ value: '小号', id: 3 }
					]
				}
			]
		}
	],
	batchSettingTableData: [{
		sukImg:'',
		retailPrice: null,
		lowerPrice: null,
		costPrice: null,
		linePrice: null,
		inventory: null,
		warnInventory:'',
	}]
})
const ruleForm = reactive({
	publish: 2,
	source: 2,
	type: 1,
	property: '',
	cellPath: [],
	status: [],
	system: '', 
	brand: '',
	category: '',
	name: '',
	setting: 1,
	specsId:null,
	cellStore: []
})

const rules = reactive<FormRules<any>>({
	name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
	property: [ {required: true, message: '请选择商品属性', trigger: 'change', }],
	status: [ {required: true, message: '请选择销售状态', trigger: 'change', }],
	system: [ {required: true, message: '请选择系统分类', trigger: 'change', }],
	brand: [ {required: true, message: '请选择商品品牌', trigger: 'change', }],
	category: [ {required: true, message: '请选择门店商品分类', trigger: 'change', }],
	cellStore: [ {required: true, message: '请选择门店商品分类', trigger: 'blur', }],
	specsId: [ {required: true, message: '请选择商品规格', trigger: 'change', }],
})

// 批量设置
const batchForm = reactive({
	sukImg:'',
	retailPrice: null,
	lowerPrice: null,
	costPrice: null,
	linePrice: null,
	inventory: null,
	warnInventory:'',
})

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}

const nextStep = () => {
	emit('stepChange', 'second')
}

const addCategores = () => categoryVisibel.value = true;
const addBrand = () => brandVisibel.value = true;
const selectImg =  () => selectVisibel.value = true;
</script>

<style lang="scss" scoped>
.base-info-content{
	.form-ele-size {
		width: 260px;
	}
	.line-title{
		font-size: 18px;
		padding: 8px 12px;
		background-color: #eceef0;
		border-radius: 6px;
		margin-bottom: 15px;
	}
	.selector-img{
		width: 64px;
		height: 64px;
		border: 1px solid #ededed;
		border-radius: 5px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		&:hover {
			background-color: #f5f5f5;
			border: 1px solid #e4e3e3;
		}
	}
}
</style>
